<template>
  <div class="siderBox" v-bind:style="{ right: showFlag ? '0px' : '-322px' }">
    <div class="shop-box">
      <!-- @click.self="changeShowFlag" -->
      <div class="shop-car-icon" @click="changeShowFlag">
        <div class="shop-car-icon-hd">
          <div class="cars-icon"></div>
          <div class="cars-num">({{ checkTotal }})</div>
        </div>
        <div class="shop-car-icon-bd">￥{{ checkedGoodsAmount }}</div>
        <a href="javascript:;" class="hdsm">点击结算</a>
      </div>
      <div class="active-sm" @click.stop="clickSmFlag">活动说明</div>
      <div class="map-back">
        <a v-bind:href="_url">返回地图</a>
      </div>
      <ul>
        <li v-for="(item, index) in cart" v-bind:key="index">
          <div class="shop-info">
            <el-checkbox
              v-model="item.isCheck"
              @change="changeAllFlag"
            ></el-checkbox>
            <el-image v-bind:src="item.img" loading="lazy" fit="cover" />
            <div class="shop-info-right">
              <p>{{ item.name }}</p>
              <p>
                <em>￥{{ item.price }}</em
                ><i>/{{ item.tm }}</i>
              </p>
              <p class="number-btn">
                <span class="left" @click="removeCart2(item)">-</span>
                <input type="text" readonly v-model="item.amount" />
                <span @click="cartFn(item)">+</span>
              </p>
            </div>
          </div>
          <div class="del" style="cursor: pointer">
            <el-icon style="cursor: pointer" @click="removeCart(item)">
              <Delete />
            </el-icon>
          </div>
        </li>
      </ul>
      <div class="submit-box">
        <div class="submit-box-left">
          <div>
            <label for="">
              <el-checkbox v-model="allchange" @change="checkAll"
                >全选</el-checkbox
              ></label
            >
          </div>
          <div>
            已选 <em>{{ checkTotal }}</em
            >件商品 总价 <em>￥{{ checkedGoodsAmount }}</em>
          </div>
        </div>
        <div class="submit-box-right" @click="Buy">立即购买</div>
      </div>
    </div>
    <!-- iframe 弹层 -->
    <div class="buygoods_mode_mask" v-show="iframeFlag">
      <div class="BuyGoodsMode">
        <span
          class="shop_buy_layer_close"
          v-on:click="shop_buy_layer_close"
        ></span>
        <iframe v-bind:src="iframeSrc" frameborder="0"></iframe>
      </div>
    </div>
    <!-- iframe 弹层 -->
  </div>
</template>

<script setup>
import { ref, toRefs, computed, defineEmits, defineProps, watch } from "vue";
import _service from "../service/index";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
const store = useStore();
let { getters, dispatch } = useStore();
const showFlag = ref(false);
const iframeFlag = ref(false);
const iframeSrc = ref("");
const _url = ref("");
const cart = computed(() => getters["carBox/cart"]);
const allchange = computed(() => getters["carBox/allchange"]);
let total = computed(() => getters["carBox/total"]);
let checkTotal = computed(() => getters["carBox/checkTotal"]);
let checkedGoodsAmount = computed(() => getters["carBox/checkedGoodsAmount"]);
const emit = defineEmits(["doSth", "doSth2"]);
const doSth = () => {
  emit("doSth");
};
const clickSmFlag = () => {
  console.log(11);
  emit("doSth2");
};
const props = defineProps({
  jump_url: {
    type: String,
  },
});

watch(
  () => props.jump_url,
  (newValue, oldValue) => {
    console.log("值发生了变更", newValue, oldValue);
    _url.value = newValue;
  },
  { deep: true, immediate: true }
);

//全选反选操作
function checkAll() {
  store.commit("carBox/updateAllGoodsState");
}
//添加购物车
function cartFn(item) {
  dispatch("carBox/isAddShop", item);
}
//清空购物车
function delCart() {
  store.commit("carBox/delectAll");
  doSth();
}
//修改全选状态
function changeAllFlag() {
  store.commit("carBox/updateAllFlag");
}
//删除购物车数据
function removeCart(item) {
  store.commit("carBox/remove", item.gid);
  doSth();
}
//减少购物车数据
function removeCart2(item) {
  if (item.amount == 1) return false;
  store.commit("carBox/remove2", item.gid);
  doSth();
}
function changeShowFlag() {
  showFlag.value = !showFlag.value;
}
//立即购买
async function Buy() {
  const newArr = cart.value.filter((item) => item.isCheck);
  console.log(newArr);
  if (newArr.length == 0) {
    ElMessage({
      message: "请先选择商品!",
      type: "error",
    });
    return false;
  }
  var dataArr = [];
  newArr.forEach((element) => {
    var obj = { I: "", C: "", U: 0 };
    obj.I = element.gid;
    obj.C = element.amount;
    dataArr.push(obj);
  });
  iframeSrc.value = "";
  const res = await _service.Buy(dataArr);
  if (res.errCode == -6001) {
    iframeFlag.value = true;
    iframeSrc.value = res.data;
    store.commit("carBox/removeIsCheck");
    doSth();
  } else {
    ElMessage({
      message: res.msg,
      type: "error",
    });
  }
  console.log(res);
}
//关闭
function shop_buy_layer_close() {
  iframeFlag.value = false;
}
</script>
